<template>
  <div>
    <div class="haveId" v-if="$store.state.userInfo">
      <div class="head">
        <div class="top">
          <div class="avatar">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F22%2F20150822124549_LuQzP.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631082528&t=a10c57c118e0f372636be0950c199baa"
              alt=""
            />
          </div>
          <div class="info">
            <div class="name">用户名 : {{ $store.state.userInfo.user }}</div>
            <div class="mobi">
              <i class="cc- cc-shouji">:</i>
              <span class="mobiNum">{{
                $store.state.userInfo.mobel
                  ? $store.state.userInfo.mobel
                  : "未绑定手机号"
              }}</span>
            </div>
          </div>
          <div class="edit">
            <i class="cc- cc-youjiantou1"></i>
          </div>
        </div>
        <!-- coupon -->
        <div class="coupon">
          <div class="balance">
            <div class="content">
              <span class="imp">{{ $store.state.userInfo.balance }}</span>
              <span>元</span>
            </div>
            <div class="tltle">
              <span>我的余额</span>
            </div>
          </div>
          <div class="balance">
            <div class="content">
              <span class="imp">{{ $store.state.userInfo.coupon }}</span>
              <span>个</span>
            </div>
            <div class="tltle">
              <span>我的优惠</span>
            </div>
          </div>
          <div class="intergral">
            <div class="content">
              <span class="imp">{{ $store.state.userInfo.intergral }}</span>
              <span>分</span>
            </div>
            <div class="tltle">
              <span>我的积分</span>
            </div>
          </div>
        </div>
        <!-- orderlist -->
        <div class="list">
          <div class="myorder">
            <i class="cc- cc-dingdan"></i>
            <span class="title"> 我的订单 </span>
            <i class="fl cc- cc-arrowRight"></i>
          </div>

          <div class="intergral">
            <i class="cc- cc-jifen"></i>
            <span class="title"> 积分商城 </span>
            <i class="fl cc- cc-arrowRight"></i>
          </div>

          <div class="serve">
            <i class="cc- cc-fuwu"></i>
            <span class="title"> 服务中心 </span>
            <i class="fl cc- cc-arrowRight"></i>
          </div>
        </div>

        <!-- 退出登陆 -->
        <div class="logout">
          <van-button @click="logout">退出登陆</van-button>
        </div>
      </div>
    </div>
    <div v-else class="noId">
      <van-button @click="$router.push('/login')">点击登录</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  methods: {
    logout() {
      this.$dialog.confirm({
        title: "状态",
        message: "是否退出登录状态",
      })
        .then(() => {
          this.$store.dispatch("rmNowInfo");
          this.$router.push('/')
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
div {
  .noId {
    background-color: rgba(253, 227, 227, 0.253);
    padding: 67% 0;
    text-align: center;
    button {
      width: 80%;
    }
  }
  .haveId {
    .head {
      .top {
        background-color: var(--themeColor);
        padding: 20px;

        // position: relative;
        display: flex;
        .avatar {
          flex: 1;
          img {
            // display: block;
            border-radius: 50%;

            height: 180px;
          }
        }
        .info {
          width: 100%;

          flex: 10;
          padding: 0 60px;
          .name {
            height: 100px;
            line-height: 100px;
          }
          .mobi {
            font-size: 40px;
            .cc- {
              font-size: 40px;
            }
          }
        }
        .edit {
          height: 100%;

          flex: 1;
          margin: auto 0;
          // position: absolute;
          // top:50%;
          // transform: translateY(-50%);
          // right: 0;
        }
      }
    }
    .coupon {
      display: flex;
      justify-content: space-around;
      height: 150px;
      align-items: center;
      .content {
        text-align: center;

        .imp {
          margin-bottom: 40px;
          font-size: 60px;
          color: burlywood;
        }
      }
    }
    .list {
      :nth-child(1) i {
        color: #02a774;
      }
      :nth-child(2) i {
        color: gold;
      }
      :nth-child(3) i {
        color: blue;
      }
      div {
        padding: 0 50px;
        line-height: 100px;
        border-top: 1px solid #d8d8d8;
      }
      i {
        margin-right: 20px;
        font-size: 40px;
      }
      div:nth-last-child(1) {
        border-bottom: 1px solid #d8d8d8;
      }
      i.fl {
        float: right;
        color: #000000;
        font-size: 30px;
      }
    }
    .logout {
      padding: 20% 0;
      text-align: center;
      button {
        width: 80%;
      }
    }
  }
}
</style>